<template>
	<view class="container" :style="{ overflow: isScrollDisabled ? 'hidden' : 'auto' }">
		<!-- <view class="nav" @tap="toHome()">
			<image src="/static/arrow-left.png"></image>
		</view> -->
		<!-- 设置项 -->
		<view class="settings">
			<!-- 设置区的标题 -->
			<!-- <view class="settings-title">设置项</view> -->

			<!-- 各个设置项 -->
			<view class="setting-item-wrapper">
				<view :class="activeSetting=='gameMode'?'cgreen new-oneis':'cgrey new-oneno'" class="setting-item"
					@click="setGameMode">
					<view style="display: flex;align-items: center;">
						<image
							src="https://img.tennoir.ltd/static/new/%E6%B8%B8%E6%88%8F%E6%A8%A1%E5%BC%8F%E8%AE%BE%E7%BD%AE.png"
							class="new-shezhiimg" />
						<view :class="activeSetting=='gameMode'?'setting-title':'new-setting-title'">游戏模式设置</view>
					</view>
					<view class="setting-sub">请选择开始模式</view>
				</view>

				<view :class="activeSetting=='frequency'?'cgreen new-oneis':'cgrey new-oneno'" class="setting-item"
					@click="setFrequency">
					<view style="display: flex;align-items: center;">
						<image src="https://img.tennoir.ltd/static/new/%E9%A2%91%E7%8E%87%E8%AE%BE%E7%BD%AE.png"
							class="new-shezhiimg" />
						<view :class="activeSetting=='frequency'?'setting-title':'new-setting-title'">频率设置</view>
					</view>
					<view class="setting-sub">发球频率</view>
				</view>
			</view>
			<view class="setting-item-wrapper">
				<view :class="activeSetting=='power'?'cgreen new-oneis':'cgrey new-oneno'" class="setting-item"
					@click="setPower">
					<view style="display: flex;align-items: center;">
						<image src="https://img.tennoir.ltd/static/new/%E7%90%83%E9%80%9F%E8%AE%BE%E7%BD%AE.png"
							class="new-shezhiimg" />
						<view :class="activeSetting=='power'?'setting-title':'new-setting-title'">球速设置</view>
					</view>
					<view class="setting-sub">发球速度</view>
				</view>
				<view :class="activeSetting=='angle'?'cgreen new-oneis':'cgrey new-oneno'" class="setting-item"
					@click="setAngle">
					<view style="display: flex;align-items: center;">
						<image src="https://img.tennoir.ltd/static/new/%E8%A7%92%E5%BA%A6%E8%AE%BE%E7%BD%AE.png"
							class="new-shezhiimg" />
						<view :class="activeSetting=='angle'?'setting-title':'new-setting-title'">角度设置</view>
					</view>
					<view class="setting-sub">左右角度，上下角度</view>
				</view>
			</view>
		</view>

		<!-- 标题 -->
		<view class="title">
			<image src="https://img.tennoir.ltd/static/new/%E8%B6%85%E8%B6%8A%E8%87%AA%E6%88%91.png"
				class="new-titleimg" />
			<!-- <text class="main-title">默认设置</text> -->
			<text class="new-main-title">默认设置</text>

		</view>

		<template v-if="activeSetting=='gameMode'">
			<!-- 布局：分为两列 -->
			<view class="main-content">
				<!-- 选项按钮 -->
				<view class="options">
					<view class="new-option-button" @click="setBalls(30)">30球</view>
					<view class="new-option-button" @click="setBalls(50)">50球</view>
					<view class="new-option-button" @click="continuousServe">持续发球</view>
					<view class="new-option-button" @click="leftRightServe">左右球</view>
					<view class="new-option-button" @click="unlockBalls">待解锁</view>
				</view>
			</view>

			<!-- start-column 放在右下角，并且按钮上下排列 -->
			<!-- <view class="start-column" @tap="startGame">
			  <button class="start-button">{{ gameStatus === 0 ? '开始' : '结束' }}</button>
			  <image src="/static/start.png"></image>
			</view> -->
			<view class="new-start-column" @tap="startGame">
				<image src="https://img.tennoir.ltd/static/new/%E7%BC%96%E7%BB%84%203@3x.png"></image>
				<!--			  <image src="/static/new/编组 14@2x.png"></image>-->
				<view class="new-start-button">{{ gameStatus === 0 ? '开始' : '结束' }}</view>
			</view>
		</template>



		<template v-if="activeSetting=='frequency'" @start="startGame">
			<frequency></frequency>
		</template>

		<template v-if="activeSetting=='power'">
			<power></power>
		</template>

		<template v-if="activeSetting=='angle'">
			<angle></angle>
		</template>

	</view>
</template>

<script>
	import power from './components/power.vue'
	import angle from './components/angle.vue'
	import frequency from './components/frequency.vue'
	import http_config from '@/config/http';
	export default {
		data() {
			return {
				isScrollDisabled: true, // 默认禁用滚动
				activeSetting: 'gameMode', // 当前高亮的设置项
				machine_id: null,
				gameStatus: 0, // 游戏状态，0 表示停止，1 表示开始
			};
		},
		components: {
			frequency,
			power,
			angle
		},
		onPageScroll() {
			if (this.isScrollDisabled) {
				// 停止页面滚动
				uni.pageScrollTo({
					scrollTop: 0, // 强制保持页面在顶部
					duration: 0,
				});
			}
		},
		onShow() {
			// this.$xyfun.setNavBg();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#000',
			});
			this.css = this.$xyfun.css();
			// 在页面显示时检查是否有订单
			this.checkOrder();
		},
		methods: {
			checkOrder() {
				// 调用API接口检查是否有订单
				this.$xyfun.storeId().then((store_id) => {
					this.$api.post({
						url: '/common/checkOrder', // 后端接口
						// loadingTip: '加载中...',
						data: {
							store_id: store_id,
						},
						success: res => {
							console.log("ball_mac:" + res.ball_mac);
							console.log(JSON.stringify(res, null, 2)); // 美化输出
							if (res && res.deviceCode) {
								// 如果返回了设备码，表示有有效订单
								let existingData = uni.getStorageSync('ctrlMachine') || {};
								existingData.machine_id = res.deviceCode;
								existingData.ball_mac = res.ball_mac;
								uni.setStorageSync("ctrlMachine", existingData);
								this.bindDevice();
								// 继续停留在当前页面并使用设备码
								uni.showToast({
									title: '设备已绑定',
									icon: 'success'
								});
							} else {
								// 没有订单，提示用户并跳转到预约页面
								uni.showToast({
									title: '当前无订单，请先预约',
									icon: 'none'
								});
								// 延迟返回上一页，避免与跳转产生冲突
								setTimeout(() => {
									this.$xyfun.back(); // 延迟后返回
								}, 500); // 1.5秒后返回
							}
						},

					})
				})
			},
			toHome() {
				uni.switchTab({
					url: "/pages/index"
				})
			},
			setGameMode() {
				this.activeSetting = 'gameMode'; // 设置为高亮
			},
			setFrequency() {
				this.activeSetting = 'frequency'; // 设置为高亮

			},
			setPower() {
				this.activeSetting = 'power'; // 设置为高亮
			},
			setAngle() {
				this.activeSetting = 'angle'; // 设置为高亮
			},

			setBalls(number) {
				// 设置球数的逻辑
				let existingData = uni.getStorageSync('ctrlMachine') || {};
				existingData.balls = number
				existingData.mode = 1
				uni.setStorageSync("ctrlMachine", existingData);
			},
			continuousServe() {
				// 持续发球的逻辑
				let existingData = uni.getStorageSync('ctrlMachine') || {};
				existingData.mode = 3
				uni.setStorageSync("ctrlMachine", existingData);

			},
			leftRightServe() {
				// 左右球的逻辑
				let existingData = uni.getStorageSync('ctrlMachine') || {};
				existingData.mode = 2
				uni.setStorageSync("ctrlMachine", existingData);
			},
			unlockBalls() {
				// 弹出提示“升级中”
				uni.showToast({
					title: '升级中，请稍等...',
					icon: 'none', // 使用“无图标”样式
					duration: 2000, // 持续2秒
				});
				// 带解锁的逻辑
				// let existingData = uni.getStorageSync('ctrlMachine') || {};
				// existingData.islock = 1
				// uni.setStorageSync("ctrlMachine", existingData);
			},
			bindDevice() {
				let ctrlMachine = uni.getStorageSync("ctrlMachine");
				this.$api.post({
					url: '/common/ctrlMachineBind',
					loadingTip: '加载中...',
					data: {
						ctrlMachine: ctrlMachine
					},
				});
			},

			startGame() {
				// 获取本地存储的 ctrlMachine
				let ctrlMachine = uni.getStorageSync("ctrlMachine") || {};

				// 根据当前游戏状态来切换开始和结束
				if (this.gameStatus === 0) {
					this.gameStatus = 1; // 设置为已开始
					ctrlMachine.gameStatus = 1; // 更新 ctrlMachine 中的状态
					uni.setStorageSync("ctrlMachine", ctrlMachine); // 保存到本地存储
				} else {
					this.gameStatus = 0; // 设置为已结束
					ctrlMachine.gameStatus = 0; // 更新 ctrlMachine 中的状态
					uni.setStorageSync("ctrlMachine", ctrlMachine); // 保存到本地存储
				}

				// 调用后端接口启动或结束游戏
				this.$api.post({
					url: '/common/startGameMode',
					loadingTip: '加载中...',
					data: {
						ctrlMachine,
					},
					success: (res) => {
						if (this.gameStatus === 1) {
							uni.showToast({
								title: '模式启动成功',
								icon: 'success',
							});
						} else {
							uni.showToast({
								title: '模式已结束',
								icon: 'success',
							});
						}
					},
				});
			},


		},
	};
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		// background-color: #000;
		background-color: #F5F5F5;
		color: #fff;
		padding: 20px;
		height: 100vh;
		/* 高度为视口高度 */
		overflow: hidden;
		/* 禁止所有滚动 */

	}

	.new-start-column {
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 166rpx;
			height: 166rpx;
		}

		.new-start-button {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
			line-height: 44rpx;
			text-align: left;
			font-style: normal;
		}
	}

	.new-option-button {
		width: 126rpx;
		height: 126rpx;
		background: #001D2B;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
		margin-right: 40rpx;
		margin-bottom: 16rpx;
	}

	.new-titleimg {
		width: 360rpx;
		height: 158rpx;
	}

	.new-main-title {
		width: 160rpx;
		height: 60rpx;
		border-radius: 34rpx;
		border: 2rpx solid #FF5937;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FF5937;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.new-setting-title {
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
	}

	.new-shezhiimg {
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}

	.new-oneis {
		background: #FF5937;
		box-shadow: 4rpx 6rpx 32rpx 0rpx rgba(255, 89, 55, 0.43);
		border-radius: 16rpx;
	}

	.new-oneno {
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 40rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 16rpx;
	}

	.nav {
		position: absolute;
		top: 20px;
		left: 10px;

		image {
			width: 25px;
			height: 25px;
		}
	}

	.active {
		border: 2px solid #fff;
		/* 白色边框 */
		background-color: #5ab716;
		/* 高亮的绿色背景 */
		color: #000;
		/* 文字颜色 */
	}

	/* settings部分样式 */
	.settings {
		display: flex;
		flex-direction: column;
		width: 100%;
		// padding: 20px;
	}

	/* 设置区的标题样式 */
	.settings-title {
		font-size: 28rpx;
		/* 设置标题字体大小 */
		font-weight: bold;
		/* 设置字体为粗体 */
		color: #fff;
		/* 设置字体颜色为白色 */
		margin-bottom: 20rpx;
		/* 给标题下方留出一些空间 */
		text-align: left;
		/* 标题居左对齐 */
	}

	/* 包裹每一行setting-item的容器 */
	.setting-item-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		/* 增加每行设置项之间的间距 */
	}

	/* 各个设置项 */
	.setting-item {
		width: 254rpx;
		height: 112rpx;

		/* 每个setting-item占48%宽度，留出间隙 */
		display: flex;
		flex-direction: column;
		padding: 8px 16px;
		border-radius: 4px;
		cursor: pointer;
		justify-content: center;
		// margin-bottom: 10rpx;
		/* 增加上下间距为20rpx */
	}

	.setting-item.green {
		background-color: #1aad19;
		/* 绿色背景 */
	}

	.setting-item.gray {
		background-color: #1B1B1B;
		/* 灰色背景 */
	}

	/* 设置项标题 */
	.setting-title {
		font-size: 32rpx;
		/* 设置每个设置项标题的字体大小 */
		font-weight: bold;
		/* 每个设置项标题设置为粗体 */
		color: #fff;
		/* 设置字体颜色为白色 */
		// margin-bottom: 10rpx;
		/* 增加标题和子标题之间的间距为20rpx */
	}

	/* 设置项子标题 */
	.setting-sub {
		margin-top: 10rpx;
		font-size: 20rpx;
		/* 设置每个设置项子标题的字体大小 */
		color: #ccc;
		/* 子标题的颜色为浅灰色 */
	}

	.title {
		display: flex;
		// justify-content: flex-start;
		justify-content: space-between;
		align-items: flex-end;
		width: 100%;
		margin: 60rpx auto 5rpx;
		/* 给标题和下方内容留点空间 */
	}


	/* image 样式 */
	// .title image {
	// 	width: 525rpx;
	// 	/* 设置图片宽度 */
	// 	height: 215rpx;
	// 	/* 设置图片高度 */
	// 	margin-right: 20rpx;
	// }

	/* main-title 样式 */
	.main-title {
		margin-top: 60px;
		display: inline-block;
		/* 让 text 元素变为块级元素，以便调整背景 */
		background-color: #5AB716;
		/* 背景颜色 */
		color: #fff;
		/* 字体颜色 */
		height: 59rpx;
		/* 高度设置为 59rpx */
		line-height: 59rpx;
		/* 让文字垂直居中 */
		width: 162rpx;
		padding: 0 20rpx;
		/* 给按钮左右一些内边距 */
		border-radius: 10px;
		/* 设置圆角 */
		text-align: center;
		/* 文字居中 */
		font-size: 32rpx;
		/* 设置字体大小 */
		font-weight: 400;
		/* 字体加粗 */
		transition: background-color 0.3s ease;
		/* 按钮背景过渡效果 */
	}

	.main-title:hover {
		background-color: #4f9e11;
		/* 悬停时背景色稍微变暗 */
	}

	.main-content {
		display: flex;
		justify-content: space-between;
		/* 左右两列分开 */
		width: 100%;
		/* 容器宽度填满 */
		margin: 80rpx 0 99rpx 0rpx;
		/* 给上方的内容留空间 */
	}

	.options {
		// width: 50%;
		width: 100%;
		/* 选项列宽度 */
		display: flex;
		flex-wrap: wrap;
		// flex-direction: column;
		/* 竖排 */
		// align-items: flex-start;
		// margin-top: 50px;
		/* 左对齐 */
	}

	.option-button {
		width: 245rpx;
		height: 106rpx;
		border-radius: 53rpx;
		/* 按钮宽度适中 */
		margin: 15rpx 0;
		text-align: center;
		border: 6rpx solid #fff;
		/* 白色边框 */
		background-color: transparent;
		/* 无背景 */
		color: #fff;
		/* 默认字体颜色为白色 */
		transition: all 0.3s ease;
		/* 平滑过渡效果 */
	}

	.option-buttonl {
		width: 245rpx;
		height: 106rpx;
		border-radius: 53rpx;
		/* 按钮宽度适中 */
		margin: 15rpx 0;
		text-align: center;
		border: 6rpx solid #fff;
		/* 白色边框 */
		background-color: transparent;
		/* 无背景 */
		color: #fff;
		/* 默认字体颜色为白色 */
		transition: all 0.3s ease;
		/* 平滑过渡效果 */
	}

	.new-option-button:active {
		background: #FF5937;
		border-radius: 20rpx;
	}

	.new-option-button:hover {
		background: #FF5937;
		border-radius: 20rpx;
	}

	.option-button:hover {
		border-color: #5AB716;
		/* 高亮时边框变绿色 */
		color: #5AB716;
		/* 高亮时字体颜色变绿色 */
	}

	.option-button:active {
		border-color: #5AB716;
		/* 按下时边框变绿色 */
		color: #5AB716;
		/* 按下时字体颜色变绿色 */
	}

	.option-button:focus {
		outline: none;
		/* 去掉焦点框 */
	}


	/* start-column 布局调整 */
	.start-column {
		position: absolute;
		/* 绝对定位 */
		bottom: 0;
		/* 离底部 20px */
		right: 61rpx;
		/* 离右边 20px */
		display: flex;
		flex-direction: column;
		/* 按钮竖排 */
		align-items: center;


		image {
			width: 182rpx;
			height: 182rpx;
		}
	}

	.start-button {
		width: 100%;
		/* 按钮宽度填满父容器 */
		// margin: 10px 0;
		/* 上下按钮之间的间距 */
		// padding: 10px;
		/* 给按钮一点内边距 */
		border-radius: 10px;
		/* 圆角 */
		background-color: transparent;
		/* 无背景 */
		color: #FFFFFF;
		/* 字体颜色为白色 */
		font-size: 36rpx;
		/* 字体大小为 36rpx */
		text-align: center;
		/* 文本居中 */
		border: none;
		/* 去掉边框 */
		transition: all 0.3s ease;
		/* 平滑过渡效果 */
	}

	.start-button:hover {
		/* 如果需要悬停高亮效果可以在这里修改 */
		cursor: pointer;
		/* 悬停时显示手型 */
	}

	.start-button:focus {
		outline: none;
		/* 去掉焦点框 */
	}
</style>